<template>
  <div class="index">


    <!--    工具条-->
    <div style="margin: 20px;">
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" v-if="$store.getters.button.includes('category:add')" @click="categoryAddDialog" > 添 加 </el-button>
      <el-button type="danger" size="small" icon="el-icon-refresh" @click="reload" > 刷 新 </el-button>
    </div>

    <!--    表格-->
    <div class="table">
      <el-table
        :data="categoryList"
        element-loading-text="Loading"
        border
        fit
        :stripe="true"
        highlight-current-row
        :row-key="getRowKey"
        :tree-props="{children: 'children'}"
        :default-expand-all="true"
        style="width: 100%">
        <el-table-column
          align="center"
          label="ID"
          prop="id">
        </el-table-column>

        <el-table-column
          align="center"
          label="分类名称"
          prop="categoryName">
        </el-table-column>

        <el-table-column
          align="center"
          label="分类描述"
          prop="categoryDesc">
        </el-table-column>

        <el-table-column
          align="left"
          label="操作">
          <template slot-scope="scope">
            <el-button

              size="small"
              type="success"
              icon="el-icon-edit"
              v-if="$store.getters.button.includes('category:update')"
              @click="categoryEditDialog(scope.$index, scope.row)">编 辑
            </el-button>
            <el-button

              size="small"
              type="warning"
              icon="el-icon-arrow-up"
              v-if="scope.row.id != -scope.row.parentId && $store.getters.button.includes('category:update')"
              @click="categoryToFirstDialog(scope.$index, scope.row)">置 顶
            </el-button>
            <el-button

              size="small"
              type="danger"
              icon="el-icon-delete"
              v-if="scope.row.children===null || scope.row.children.length===0 && $store.getters.button.includes('category:delete')"
              @click="categoryDeleteDialog(scope.$index, scope.row)">删 除
            </el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>


    <!--    编辑对话框-->
    <div class="dialog">
      <el-dialog title="编辑" :visible.sync="editDialogFormVisible" align="center" width="30%" destroy-on-close="true"
                 :close-on-click-modal='false'>
        <el-form>
          <el-form-item label="ID">
            <el-input v-model="dialogCategoryInfo.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="分类名称">
            <el-input v-model="dialogCategoryInfo.categoryName"></el-input>
          </el-form-item>
          <el-form-item label="分类描述">
            <el-input v-model="dialogCategoryInfo.categoryDesc"></el-input>
          </el-form-item>
          <el-form-item label="Parent">

            <div class="select">


              <el-select v-model="dialogCategoryInfo.parentId" placeholder="请选择" filterable>


                <!--                放置到一级分类之下-->
                <el-option
                  v-if="item.id != -dialogCategoryInfo.parentId"
                  v-for="item in categoryList"
                  :key="item.id"
                  :label="item.categoryName"
                  :value="item.id">
                </el-option>

                <!--                放置到二级分类之下-->
                <el-option-group
                  v-for="group in categoryList"
                  :label="group.categoryName"
                >
                  <el-option
                    v-for="item in group.children"
                    :key="item.id"
                    :label="group.categoryName + ' / ' +item.categoryName"
                    :value="item.id">
                  </el-option>
                </el-option-group>

              </el-select>
            </div>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false">取 消</el-button>
          <el-button size="small"
          type="success"
          v-if="$store.getters.button.includes('category:update')"
          icon="el-icon-edit" @click="updateCategory">更 新</el-button>
        </div>
      </el-dialog>
    </div>

    <!--    删除对话框-->
    <div class="dialog">
      <el-dialog title="删除" :visible.sync="deleteDialogVisible" align="center" width="30%" destroy-on-close="true"
                 :close-on-click-modal='false'>
        <span>是否删除 << {{this.dialogCategoryInfo.categoryName}} >> </span>
        <div slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="danger"size="small"  v-if="$store.getters.button.includes('category:delete')"
                     icon="el-icon-delete" @click="deleteCategory">删 除</el-button>
        </div>
      </el-dialog>
    </div>

    <!--    置顶一级分类对话框-->
    <div class="dialog">
      <el-dialog title="设置为一级分类" :visible.sync="updateToFirstCategoryDialogVisible" align="center" width="30%"
                 destroy-on-close="true" :close-on-click-modal='false'>
        <span>是否设置 << {{this.dialogCategoryInfo.categoryName}} >> 为一级分类 </span>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateToFirstCategoryDialogVisible = false">取 消</el-button>
          <el-button type="success" @click="setCategoryNameToFirstCategory">设 置</el-button>
        </div>
      </el-dialog>
    </div>

    <!--    添加对话框-->
    <div class="dialog">
      <el-dialog title="添加" :visible.sync="addDialogFormVisible" align="center" width="30%" destroy-on-close="true"
                 :close-on-click-modal='false'>
        <el-form>
          <el-form-item label="分类名称">
            <el-input v-model="addCategoryName"></el-input>
          </el-form-item>
          <el-form-item label="分类描述">
            <el-input v-model="addCategoryDesc"></el-input>
          </el-form-item>
          <el-form-item label="Parent">

            <div class="select">


              <el-select v-model="addCategoryParentId" placeholder="请选择">


                <!--                设置为一级分类-->
                <el-option label="一级分类" :value="null"></el-option>

                <!--                放置到一级分类之下-->
                <el-option
                  v-for="item in categoryList"
                  :key="item.id"
                  :label="item.categoryName"
                  :value="item.id">
                </el-option>

                <!--                放置到二级分类之下-->
                <el-option-group
                  v-for="group in categoryList"
                  :label="group.categoryName"
                >
                  <el-option
                    v-for="item in group.children"
                    :key="item.id"
                    :label="group.categoryName + ' / ' +item.categoryName"
                    :value="item.id">
                  </el-option>
                </el-option-group>

              </el-select>
            </div>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="success" @click="addCategory">添 加</el-button>
        </div>
      </el-dialog>
    </div>

  </div>


</template>

<script>
  import {
    addCategory,
    getCategoryList,
    updateCategory,
    deleteCategory,
  } from '@/api/category'

  export default {
    name: 'index',
    inject: ['reload'],
    data() {
      return {
        // 加载
        listLoading: true,
        // 分类列表
        categoryList: [],
        // 编辑对话框
        editDialogFormVisible: false,
        // 删除对话框
        deleteDialogVisible: false,
        // 更新为一级分类对话框
        updateToFirstCategoryDialogVisible: false,
        // 添加对话框
        addDialogFormVisible: false,
        // 对话框内容
        dialogCategoryInfo: Object,


        addCategoryName: '',
        addCategoryDesc: '',
        addCategoryParentId: null
      }
    },
    mounted: function() {

      /**
       * 获取分类列表
       */
      this.getCategoryList()

      this.expandAll()
    },
    methods: {

      /**
       * 获取分类列表
       */
      getCategoryList() {
        this.listLoading = true

        // api获取
        getCategoryList().then(response => {

          if (response.code == 200) {
            const { data } = response
            // 更新数据
            this.categoryList = data
          }

        }).catch(error => {
          console.log(error)
        })

        this.listLoading = false
      },

      /**
       * 打开编辑分类对话框
       * */
      categoryEditDialog(index, row) {
        this.dialogCategoryInfo = JSON.parse(JSON.stringify(row)) //拿出修改行数据
        this.editDialogFormVisible = true  //打开对话框

        // 获取修改前路径
        // this.beforeCategoryPath = this.getCategoryPath(row)
      },

      /**
       * 打开删除分类对话框
       * */
      categoryDeleteDialog(index, row) {
        this.dialogCategoryInfo = JSON.parse(JSON.stringify(row)) //拿出修改行数据
        this.deleteDialogVisible = true  //打开对话框
        // 获取修改前路径
        // this.beforeCategoryPath = this.getCategoryPath(row)
      },
      /**
       * 打开添加分类对话框
       * */
      categoryAddDialog() {

        // 初始化数据
        this.addCategoryName = ''
        this.addCategoryDesc = ''
        this.addCategoryParentId = null

        this.addDialogFormVisible = true //打开对话框
      },

      /**
       * 打开置顶为一级分类对话框
       * */
      categoryToFirstDialog(index, row) {
        this.dialogCategoryInfo = JSON.parse(JSON.stringify(row)) //拿出修改行数据
        this.updateToFirstCategoryDialogVisible = true  //打开对话框
        // 获取修改前路径
        // this.beforeCategoryPath = this.getCategoryPath(row)
      },

      /**
       * 更新分类
       * */
      updateCategory() {

        // api获取
        updateCategory(this.dialogCategoryInfo.id, this.dialogCategoryInfo).then(response => {

          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            })


            //重新加载表格
            this.reload()

            // 关闭窗口
            this.editDialogFormVisible = false
          }

        }).catch(error => {
          console.log(error)
        })


        this.editDialogFormVisible = false

      },

      /**
       * 删除分类
       * */
      deleteCategory() {

        // api获取
        deleteCategory(this.dialogCategoryInfo.id).then(response => {

          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            })


            //重新加载表格
            this.reload()

            // 关闭窗口
            this.deleteDialogVisible = false

          }

        }).catch(error => {
          console.log(error)
        })


        this.deleteDialogVisible = false
      },

      /**
       * 设置为一级分类
       * */
      setCategoryNameToFirstCategory() {
        // var beforeParenetId = this.dialogCategoryInfo.parentId
        this.dialogCategoryInfo.parentId = -this.dialogCategoryInfo.id

        // api获取
        updateCategory(this.dialogCategoryInfo.id, this.dialogCategoryInfo).then(response => {

          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            })

            // 重新加载表格
            this.reload();

            // 关闭窗口
            this.updateToFirstCategoryDialogVisible = false


          }

        }).catch(error => {
          console.log(error)
        })

        this.updateToFirstCategoryDialogVisible = false
      },

      /**
       * 添加分类
       * */
      addCategory() {
        var addCategoryInfo = {
          categoryName: this.addCategoryName,
          categoryDesc: this.addCategoryDesc,
          parentId: this.addCategoryParentId
        }
        console.log(JSON.stringify(addCategoryInfo))

        // api获取
        addCategory(addCategoryInfo).then(response => {

            if (response.code == 200) {


              this.$message({
                showClose: true,
                message: response.message,
                type: 'success',
                center: true
              })


              //重新加载表格
              this.reload()

              // 关闭窗口
              this.addDialogFormVisible = false

            }


            this.addDialogFormVisible = false
          }).catch(error => {
          console.log(error);
        })

        this.addDialogFormVisible = false
      },



        /**
         * 未知错误 只能修改el-table的key
         * @param row
         * @returns {string}
         */
        getRowKey(row)
        {
          // return Math.random();
          return row.parent + ':' + row.id
        },

        /**
         * 表格展开所有行
         */
        expandAll()
        {
          const els = this.$el.getElementsByClassName('el-table__expand-icon')
          for (let i = 0; i < els.length; i++) {
            els[i].click()
          }
        }

      }
    }
</script>

<style scoped>
  .index{
    margin:10px 20px;
  }
</style>
